<template>
  <div>
    <div id="mountNode"></div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log(G6.Global.version);

      const initData = {
        // 点集
        nodes: [
          {
            id: "node1", // 节点的唯一标识
            x: 100, // 节点横坐标
            y: 200, // 节点纵坐标
            label: "起始点", // 节点文本
          },
          {
            id: "node2",
            x: 300,
            y: 200,
            label: "目标点",
          },
        ],
        // 边集
        edges: [
          // 表示一条从 node1 节点连接到 node2 节点的边
          {
            source: "node1", // 起始点 id
            target: "node2", // 目标点 id
            label: "我是连线", // 边的文本
          },
        ],
      };
      const graph = new G6.Graph({
        container: "mountNode",
        width: 500,
        height: 500,
        defaultNode: {
          type: "circle",
          size: [100],
          color: "#5B8FF9",
          style: {
            fill: "#9EC9FF",
            lineWidth: 3,
          },
          labelCfg: {
            style: {
              fill: "#fff",
              fontSize: 20,
            },
          },
        },
        defaultEdge: {
          style: {
            stroke: "#e2e2e2",
          },
        },
        modes: {
          // 支持的 behavior
          default: ["drag-canvas", "zoom-canvas"],
          edit: ["click-select"],
        },
      });

      graph.data(initData);
      graph.render();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>